<template>
  <div class="readerBox" :style="setupclass.bgcban" @scroll="scrollEvent">
    <div class="reader_center">
      <!-- 设置 -->
      <div class="setuoBox" :style="leftcss">
        <div class="setup">
          <!-- table of Contents -->
          <div
            class="table cursor"
            @mouseover="mouseOver(1)"
            @mouseleave="mouseleave(1)"
          >
            <div class="text">
              <img src="../../assets/homeimg/组 7238.png" alt="" />
              Table of Contents
            </div>
            <div class="xuanzhe" v-if="chapter" style="width: 440px">
              <div class="topbox">
                <div class="chapter">
                  Catalogue Chapter
                  <div class="ascending" @click="ascendingFn">
                    <div>Ascending</div>
                    <img src="../../assets/homeimg/组 7882.png" alt="" />
                  </div>
                </div>
                <!-- 章节目录 -->
                <div class="infinite" style="overflow: auto">
                  <ul
                    class="infinite-list"
                    v-infinite-scroll="load"
                    :infinite-scroll-disabled="gudong"
                  >
                    <li
                      v-for="item in titleList"
                      :key="item.id"
                      class="infinite-list-item"
                      @click="titleFn(item.id)"
                    >
                      {{ item.title }}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- Reading settings -->
          <div
            class="table cursor"
            @mouseover="mouseOver(2)"
            @mouseleave="mouseleave(2)"
          >
            <div class="text">
              <img src="../../assets/homeimg/组 7239.png" alt="" />
              Reading Settings
            </div>
            <!-- Contents 文字选择 -->
            <div
              class="xuanzhe"
              style="width: 378px; height: 334px"
              v-show="contents"
            >
              <div class="topbox">
                <div>Reading settings</div>
                <!-- 背景色 -->
                <div class="colorbgc">
                  <div
                    class="color_in"
                    @click="backgroundColorFn('#f8f8f8', '#FAFAFA')"
                    style="background: #f8f8f8"
                  ></div>
                  <div
                    class="color_in"
                    @click="backgroundColorFn('#F3EAD3', '#FFFBF2')"
                    style="background: #f3ead3"
                  ></div>
                  <div
                    class="color_in"
                    @click="backgroundColorFn('#d2e4d0', '#E5F0E4')"
                    style="background: #d2e4d0"
                  ></div>
                  <div
                    class="color_in"
                    @click="backgroundColorFn('#fde4df', '#FFF3F0')"
                    style="background: #fde4df"
                  ></div>
                  <div
                    class="color_in"
                    @click="backgroundColorFn('#cfd9e0', '#E2ECF2')"
                    style="background: #cfd9e0"
                  ></div>
                </div>
                <!-- 字体大小和间距 -->
                <div class="typefacebox">
                  <div class="typeface">
                    <div @click="fontsizeFn(1)">Aa-</div>
                    <div @click="fontsizeFn(2)" class="typeface_ml">Aa+</div>
                  </div>
                  <div class="typeface">
                    <div @click="lineHeightFn(1)">
                      <img src="../../assets/homeimg/组 7733.png" alt="" />
                    </div>
                    <div @click="lineHeightFn(2)" class="typeface_ml">
                      <img src="../../assets/homeimg/组 7735.png" alt="" />
                    </div>
                  </div>
                </div>
                <!-- 字体设置 -->
                <!-- <div class="typefacebox">
                <div
                  :class="fontcolor == 1 ? 'btnfont btnfont_color' : 'btnfont'"
                  @click="fontFn(1)"
                >
                  Prisoner
                </div>
                <div
                  :class="fontcolor == 2 ? 'btnfont btnfont_color' : 'btnfont'"
                  @click="fontFn(2)"
                >
                  Freeds
                </div>
                <div
                  :class="fontcolor == 3 ? 'btnfont btnfont_color' : 'btnfont'"
                  @click="fontFn(3)"
                >
                  Intro Thin
                </div>
                <div
                  :class="fontcolor == 4 ? 'btnfont btnfont_color' : 'btnfont'"
                  @click="fontFn(4)"
                >
                  Simpel
                </div>
              </div> -->
                <div class="setting" @click="defaultFn">Default Setting</div>
              </div>
            </div>
          </div>
          <!-- 上一章下一章 -->
          <div class="centertext cursor" @click="centrPreFn">
            Previous chapter
          </div>
          <div class="centertext cursor" @click="centrNextFn">Next chapter</div>
        </div>
      </div>
      <!-- 小说内容 -->
      <div
        class="novel"
        v-for="item in textList"
        :key="item.id"
        :style="setupclass.textbgc"
      >
        <div class="title">{{ item.title }}</div>
        <div class="author">
          <!-- <div>Author: Destiny</div>
          <div>232 words in this chapter</div> -->
          <!-- <div>Update time 2021-03-09</div> -->
        </div>
        <div class="contentText" :style="setupclass.fontclass">
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Decrypt } from "../../plugins/cypto/crypto";
import SortButton from "../../components/SortButton.vue";
import {
  ContentsingleApi,
  CataloguesinglebookApi,
  BooksdetailApi,
} from "../../requery/api";
export default {
  data() {
    return {
      count: 0,
      gudong: false,
      changdu: null, //章节总长度
      chapter: false, //chapter显示
      contents: false, //contents显示
      fontcolor: 1, //切换字体选择按钮选中
      sizefont: 20, //当前字体大小
      lineheight: 30, //当前行高
      textList: [], //章节内容
      titleList: [], //目录列表
      next_id: null, //下一张id
      pre_id: null, //上一张id
      this_id: null, //本章id
      jieliu: true, //滚动下一站请求节流
      leftcss: {
        top: 0,
      },
      order: "sort", //排序 sort 正序 -sort倒序
      // 点击改变样式
      setupclass: {
        // 背景
        bgcban: {
          background: "#f2f2f2",
        },
        // 内容背景色
        textbgc: {
          background: "#f2f2f2",
        },
        // 文字字体
        fontclass: {
          fontSize: "20px",
          lineHeight: "30px",
        },
      },
    };
  },
  methods: {
    // 滚动加载下一章
    scrollEvent(e) {
      // 获取滚动高度
      this.leftcss.top = `${e.srcElement.scrollTop}px`;
      // console.log(e.srcElement.scrollTop);
      // 判断是否触底  如果下一章为null不加载
      if (this.next_id == null) return;
      if (
        e.srcElement.scrollTop + e.srcElement.offsetHeight >
        e.srcElement.scrollHeight - 50
      ) {
        if (!this.jieliu) {
          return;
        }
        this.jieliu = false;
        this.contentsingleFn(this.next_id);
        console.log("eeee");
        // this.loadMore(); //加载更多
      }
    },
    // 点击倒序
    ascendingFn() {
      this.order = "-sort";
      CataloguesinglebookApi({
        order_by: this.order,
        book_id: this.$route.query.bookid,
        page: this.count,
        size: 20,
      }).then((res) => {
        if (res.code == 200) {
          this.count = 1;
          this.changdu = res.data[0].count;
          this.titleList = res.data;
          // res.data.map((item) => {
          //   // this.changdu = '20';
          //   this.changdu = res.data[0].count;
          //   this.titleList.push(item);
          // });
          console.log(res, "resssss");
        }
      });
    },
    // 上一章
    centrNextFn() {
      this.textList = [];
      this.contentsingleFn(this.next_id);
      console.log(this.textList.next_id);
    },
    centrPreFn() {
      this.textList = [];
      this.contentsingleFn(this.pre_id);
      console.log(this.textList.pre_id);
    },
    // 点击章节
    titleFn(item) {
      this.textList = [];
      this.contentsingleFn(item);
    },
    // 无限滚动
    noMore() {
      //当起始页数大于总页数时停止加载
      return this.titleList.length >= this.changdu;
    },
    disabled() {
      return this.loading || this.noMore;
    },
    load() {
      this.count += 1;
      CataloguesinglebookApi({
        order_by: this.order,
        book_id: this.$route.query.bookid,
        page: this.count,
        size: 20,
      }).then((res) => {
        if (res.code == 200) {
          res.data.map((item) => {
            // this.changdu = '20';
            this.changdu = res.data[0].count;
            this.titleList.push(item);
          });
          console.log(res, "resssss");
        }
      });
    },
    // 字体选择
    fontFn(text) {
      if (this.fontcolor == text) {
        return;
      }
      this.fontcolor = text;
      console.log(text);
    },
    // 设置鼠标移入移出 1为上面 2下面
    mouseOver(text) {
      console.log(text);
      if (text == 1) {
        this.chapter = true;
      } else {
        this.contents = true;
      }
    },
    mouseleave(e) {
      if (e == 1) {
        // this.timer = setTimeout(() => {
        this.chapter = false;
        // }, 500);
      } else {
        this.contents = false;
      }
    },
    // 设置背景色
    backgroundColorFn(index, textbgc) {
      // console.log(index);
      this.setupclass.bgcban.background = index;
      this.setupclass.textbgc.background = textbgc;
      console.log(textbgc);
    },
    // 字体大小
    fontsizeFn(e) {
      if (e == 1) {
        this.sizefont--;
        this.setupclass.fontclass.fontSize = `${this.sizefont}px`;
      } else {
        this.sizefont++;
        this.setupclass.fontclass.fontSize = `${this.sizefont}px`;
      }
    },
    // 设置行高
    lineHeightFn(e) {
      if (e == 1) {
        this.lineheight--;
        this.setupclass.fontclass.lineHeight = `${this.lineheight}px`;
      } else {
        this.lineheight++;
        this.setupclass.fontclass.lineHeight = `${this.lineheight}px`;
      }
    },
    // 重置设置
    defaultFn() {
      this.setupclass = {
        bgcban: {
          background: "#f2f2f2",
        },
        textbgc: {},
        fontclass: {
          fontSize: "20px",
          lineHeight: "30px",
        },
      };
    },
    // 封装章节内容请求
    contentsingleFn(id) {
      ContentsingleApi({ catalogue_id: id }).then((res) => {
        if (res.code == 200) {
          res.data.content = Decrypt(res.data.content);
          this.textList.push(res.data);
          this.next_id = res.data.next_id;
          this.pre_id = res.data.pre_id;
          this.this_id = res.data.this_id;
          this.jieliu = true;
          // this.textList = res.data;
          console.log(this.pre_id);
          console.log(res.data, "this_id");
          this.localStorageFz();
        }
      });
    },
    // 封装历史本地缓存
    localStorageFz() {
      // 本地缓存
      let temp = [];
      if (localStorage.getItem("searchHistory")) {
        temp = JSON.parse(localStorage.getItem("searchHistory"));
        // if (temp.length >= 12) temp.pop();
        let sameIndex = temp.findIndex((item, index) => {
          return item.book === this.booksdetailArr.id;
        });
        if (sameIndex >= 0) temp.splice(sameIndex, 1);
      }
      temp.unshift({
        book: this.booksdetailArr.id, //书本id
        book_name: this.booksdetailArr.book_name, //书本名
        photo: this.booksdetailArr.photo, //图片
        classify_name: this.booksdetailArr.classify_name, //分类名称
        bookid: this.this_id, //看到第几章id
      });
      console.log(temp, "temp");
      localStorage.setItem("searchHistory", JSON.stringify(temp));
    },
  },
  created() {
    // 获取书本内容 做本地存储
    BooksdetailApi({
      id: this.$route.query.bookid,
    }).then((res) => {
      this.booksdetailArr = res.data;
      console.log(res, "bookidres");
      this.localStorageFz();
    });
    // 文字内容
    this.contentsingleFn(this.$route.query.id);
  },
  components: {
    SortButton,
  },
};
</script>
 
<style lang = "less" scoped>
.qwe {
  padding-left: 10px;
}
.readerBox {
  width: 100vw;
  min-width: 1160px;
  height: 100%;
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0px;
  overflow: auto;
  .reader_center {
    position: relative;
    width: 1160px;
    height: 100%;
    margin: 0 auto;
    .novel {
      background: #fafafa;
      box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.05);
      padding: 60px 80px 80px;
      box-sizing: border-box;
      margin-bottom: 30px;
      .title {
        text-align: center;
        font-size: 26px;
        font-weight: 600;
        color: #333333;
      }
      .author {
        display: flex;
        justify-content: space-between;
        padding: 30px 0;
        box-sizing: border-box;
        font-size: 18px;
        color: #999999;
        border-bottom: 2px solid #dedede;
      }
      .contentText {
        margin-top: 30px;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: pre-line;
      }
    }
  }
}
.setuoBox {
  position: absolute;
  left: -180px;
}
.setup {
  position: absolute;
  left: 0px;
  top: 100px;
  .centertext {
    width: 154px;
    height: 44px;
    background: #fdfdfd;
    border-radius: 6px;
    text-align: center;
    line-height: 44px;
    margin-top: 8px;
    font-size: 12px;
  }
  .table {
    display: flex;
    font-size: 12px;
    color: #333333;
    position: relative;
    .text {
      width: 154px;
      height: 44px;
      padding: 14px;
      box-sizing: border-box;
      background: #fdfdfd;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      img {
        width: 12px;
        height: 12px;
        margin-right: 8px;
      }
    }
    .xuanzhe {
      position: absolute;
      left: 150px;
      margin-left: 10px;
      padding: 38px 13px 13px 36px;
      box-sizing: border-box;
      background-color: #fff;
      box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.05);
      .topbox {
        font-size: 18px;
        color: #333333;
        /* display: flex; */
        .chapter {
          display: flex;
          justify-content: space-between;
          align-content: center;
          margin-bottom: 16px;
          .ascending {
            display: flex;
            align-items: center;
            font-size: 13px;
            font-family: PingFang SC;
            color: #666666;
            img {
              width: 18px;
              height: 18px;
              margin-top: 4px;
              margin-left: 4px;
            }
          }
        }
        .infinite {
          width: 100%;
          height: 500px;
          .infinite-list {
            width: 100%;
            height: 500px;
            font-size: 17px;
            color: #333333;
            overflow: auto;
            li:hover {
              color: #fb6e3b;
            }
            li {
              margin-bottom: 26px;
            }
          }
        }
        .colorbgc {
          margin-top: 28px;
          display: flex;
          justify-content: space-around;
          .color_in {
            width: 41px;
            height: 41px;
            border-radius: 50%;
          }
        }
        .typefacebox {
          display: flex;
          justify-content: space-between;
          width: 100%;
          height: 31px;
          margin-top: 30px;
          .typeface {
            display: flex;
            width: 152px;
            height: 31px;
            background: #f8f8f8;
            border-radius: 22px;
            img {
              width: 28px;
              height: 17px;
              margin-top: 7px;
            }
            div {
              width: 50%;
              line-height: 31px;
              text-align: center;
              font-size: 11px;
              font-weight: 500;
              color: #222222;
            }
            .typeface_ml {
              position: relative;
            }
            .typeface_ml::before {
              content: "";
              width: 0;
              height: 21px;
              border: 1px solid #e0e0e0;
              position: absolute;
              left: 0;
              top: 4px;
            }
          }
          .btnfont {
            width: 74px;
            height: 30px;
            line-height: 30px;
            background: #f8f8f8;
            border-radius: 22px;
            font-size: 12px;
            color: #03041d;
            text-align: center;
          }
          .btnfont_color {
            background: rgba(251, 110, 59, 0.1);
            border: 1px solid #fb6e3b;
            color: #fb6e3b;
          }
        }
        .setting {
          width: 179px;
          height: 32px;
          background: #fb6e3b;
          border-radius: 22px;
          line-height: 32px;
          text-align: center;
          font-size: 14px;
          color: #ffffff;
          margin: 33px auto 0;
        }
      }
    }
  }
}
</style>